import { Button, Cascader, Form, Input, Select, Upload, message } from 'antd';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import {useNavigate} from 'react-router-dom'
import * as service from '../../../api/salary.js'
import '../Conference/AddMetting.scss'
const { Option } = Select;

function AddMetting(props: any) {
    var navigate = useNavigate()
    var [managelist, setManagelist] = useState([])
    const residences = [
        {
            value: '浙江',
            label: '浙江',
            children: [
                {
                    value: '杭州',
                    label: '杭州',
                    children: [
                        {
                            value: '西湖',
                            label: '西湖',
                        },
                    ],
                },
            ],
        },
        {
            value: '江苏',
            label: '江苏',
            children: [
                {
                    value: '南京',
                    label: '南京',
                    children: [
                        {
                            value: '中华门',
                            label: '中华门',
                        },
                    ],
                },
            ],
        },
    ];
    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
        },
    };
    const [form] = Form.useForm();
    const onFinish = (values: any) => { //新增会议室
        console.log('Received values of form: ', values);
        service.add_metting(values).then((res)=>{
            console.log(res);
            navigate('/index/conference/manage')
            service.metting_managelist({}).then((res) => {
                console.log(res);
                setManagelist(res.data)
            })
        })
    };
    const tailFormItemLayout = {
        wrapperCol: {
            xs: {
                span: 24,
                offset: 0,
            },
            sm: {
                span: 16,
                offset: 8,
            },
        },
    };
    var onReset = () => { }
    return (
        <div className='addmetting'>
            <div className='addmetting-one'>
                <div className='addmetting-title-left'></div>
                <h4 className='addmetting-title'>新增会议室</h4>
            </div>
            <div className='addmetting-two'>
                <Form
                    {...formItemLayout}
                    form={form}
                    name="register"
                    onFinish={onFinish}
                    style={{ maxWidth: 600 }}
                    scrollToFirstError
                >
                    <Form.Item
                        name="room_name"
                        label="会议室名称"
                        rules={[{ required: true, message: '请输入', whitespace: true }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item
                        name="local"
                        label="所在地点"
                    >
                        <Select placeholder="请选择地址">
                            <Option value="总公司 总部">总公司 总部</Option>
                            <Option value="青海分部 分公司">青海分部 分公司</Option>
                            <Option value="西安分部 分公司">西安分部 分公司</Option>
                            <Option value="上海分部 分公司">上海分部 分公司</Option>
                            <Option value="武汉分部 分公司">武汉分部 分公司</Option>
                            <Option value="镇江分部 分公司">镇江分部 分公司</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="city"
                        label="所在城市"
                        rules={[
                            { type: 'array', message: '请选择地址!' },
                        ]}
                    >
                        <Cascader options={residences} />
                    </Form.Item>
                    <Form.Item
                        name="city"
                        label="具体地址"
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item
                        name="max_num"
                        label="最多容纳人数"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="pros"
                        label="设备"
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit" >保存</Button>
                        <Button htmlType="button" onClick={onReset}>取消</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}


export default AddMetting;